---
layout: default
title: "General Widgets - Sleek Admin Dashboard Template"


parent: "widgets"
sub_parent: "widgets"
activePage: "chart-widget"
plugins: ["chart_js", "date_range_picker"]
---


						<!-- First Row  -->
						<div class="row">
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-white  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-dark mb-2">71,503</h3>
										<p>Online Signups</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="barChart1"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-white  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-dark mb-2">9,503</h3>
										<p>Weekly Visitors</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="linechart1"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-white  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-dark mb-2">71,503</h3>
										<p>Weekly Total Order</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="areaChart1"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-white  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-dark mb-2">10,503</h3>
										<p>Revenue This Week</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="gline1"></canvas>
									</div>
								</div>
							</div>
						</div>
						<!-- Second Row  -->
						<div class="row">
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-primary  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-white mb-2">71,503</h3>
										<p>Online Signups</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="barChart2"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-warning  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-white mb-2">9,503</h3>
										<p>Weekly Visitors</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="linechart2"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-danger  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-white mb-2">71,503</h3>
										<p>Weekly Total Order</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="areaChart2"></canvas>
									</div>
								</div>
							</div>
							<div class="col-md-6 col-lg-4 col-xl-3">
								<div class="widget-block rounded bg-success  d-flex">
									<div class="widget-info align-self-center w-50">
										<h3 class="text-white mb-2">10,503</h3>
										<p>Revenue This Week</p>
									</div>
									<div class="widget-chart w-50">
										<canvas id="gline2"></canvas>
									</div>
								</div>
							</div>
						</div>
						<!-- Third Row  -->
						<div class="row">
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-white ">
									<div class="card-block">
										<h3 class="text-dark">71,503</h3>
										<p class="py-2">Online Signups</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="barChart"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-white ">
									<div class="card-block">
										<h3 class="text-dark">9,503</h3>
										<p class="py-2">New Visitors Today</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="dual-line"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-white ">
									<div class="card-block">
										<h3 class="text-dark">71,503</h3>
										<p class="py-2">Monthly Total Order</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="area-chart"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-white ">
									<div class="card-block">
										<h3 class="text-dark">9,503</h3>
										<p class="py-2">Total Revenue This Year</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="line"></canvas>
									</div>
								</div>
							</div>
						</div>
						<!-- Fourth Row  -->
						<div class="row">
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-primary ">
									<div class="card-block">
										<h3 class="text-white">71,503</h3>
										<p class="py-2">Online Signups</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="barChart3"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-warning ">
									<div class="card-block">
										<h3 class="text-white">9,503</h3>
										<p class="py-2">New Visitors Today</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="dual-line3"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-danger ">
									<div class="card-block">
										<h3 class="text-white">71,503</h3>
										<p class="py-2">Monthly Total Order</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="area-chart3"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-3 col-sm-6">
								<div class="card widget-block p-4 rounded bg-success ">
									<div class="card-block">
										<h3 class="text-white">9,503</h3>
										<p class="py-2">Total Revenue This Year</p>
									</div>
									<div class="chartjs-wrapper" style="height: 110px;">
										<canvas id="line3"></canvas>
									</div>
								</div>
							</div>
						</div>
						<!-- Fifth Row  -->
						<div class="row">
							<div class="col-xl-8 col-md-12">
								{%- include sales-graph.htm -%}
							</div>
							<div class="col-xl-4 col-md-12">
								{%- include revenue-donut-chart.htm -%}
							</div>
						</div>
						<!-- Sixth Row  -->
						<div class="row">
							<div class="col-xl-4 col-md-12">
								<div class="card card-default">
									<div class="card-header justify-content-center">
										<h2>Sale Overview</h2>
									</div>
									<div class="card-body pt-0" style="position: relative; height:50vh">
										<canvas id="polar"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-8 col-md-12">
								<div class="card card-default" id="user-acquisition">
									<div class="card-header justify-content-between pb-5">
										<h2 class=" text-dark">User Acquisition</h2>
									</div>
									<div class="card-body pt-0 mb-5" style="position: relative; height:45vh">
										<canvas id="acquisition" class="chartjs"></canvas>
										<div id="acqLegend" class="customLegend"></div>
									</div>
								</div>
							</div>
						</div>
						<!-- Seventh Row  -->
						<div class="row">
							<div class="col-xl-8">
								<div class="card card-default" id="activity-user">
									<div class="card-header d-flex flex-wrap justify-content-between">
										<h2>User Activity</h2>
										<div class="date-range-report ">
											<span></span>
										</div>
									</div>
									<div class="card-body">
										<canvas id="activity" class="chartjs"></canvas>
									</div>
								</div>
							</div>
							<div class="col-xl-4">
								<div class="card card-default" id="activity-user">
									<div class="card-header">
										<h2>Current Users</h2>
									</div>
									<div class="card-body">
										<canvas id="currentUser" class="chartjs"></canvas>
									</div>
								</div>
							</div>
						</div>

						<!-- Recent Orders -->
						<div class="row">
							<div class="col-lg-6">
								{%- include analytics-device.htm -%}
							</div>
							<div class="col-lg-6">
								<div class="card card-default" id="activity-user">
									<div class="card-header">
										<h2>Sale Overview</h2>
									</div>
									<div class="card-body">
										<canvas id="radar"></canvas>
									</div>
								</div>
							</div>
						</div>
